﻿@model mscook.core.services.ImageSettingFactory.ImageSettingSection


@using (Html.BeginForm("edit", "platimage", FormMethod.Post, new { data_val = "true" }))
{   
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>修改板块信息</h3>
    </div>
    if (Model != null)
    {
    @Html.ValidationSummary(true, "", new { @class = "red" }) 
    <div class="modal-body">

        <fieldset>
            <div class="control-group">


                <div class="controls">
                    @Html.TextBoxFor(model => model.alias, new { @class = "input_text", type = "hidden", size = "30", role = "textbox" })



                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Name</label>
                <div class="controls">
                    @Html.TextBoxFor(model => model.name, new { @class = "input_text", size = "30", role = "textbox" })
                    @Html.ValidationMessageFor(m => m.name)


                </div>
            </div>
            <div class="control-group">
                <label class="control-label">
                    图片列表
                     <a href="#"><i class="icon-plus-sign"></i></a>

                </label>
                <div class="controls">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Folder</th>
                                <th>Width</th>
                                <th>Height</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="hide">
                                <td>
                                    <span class="hide"></span>
                                    @Html.TextBox("folder", "", new { id = "", style = "width:40px;" })</td>
                            
                                <td>
                                    <span class="hide"></span>
                                    @Html.TextBox("width", "", new { id = "", style = "width:40px;" })
                                </td>
                                <td>
                                    <span class="hide"></span>
                                    @Html.TextBox("height", "", new { id = "", style = "width:40px;" })
                                </td>
                                <td class="action" data-section="@Model.alias">
                                    <a class="btn btn-success" href="#"><i class="icon-refresh"></i>Refresh</a>
                                    <a class="btn btn-danger" href="#"><i class="icon-trash icon-white"></i>Delete</a>
                                </td>

                            </tr>
                            @if (Model.ImageSettings != null)
                            {

                                foreach (mscook.core.services.ImageSettingFactory.ImageSetting image in Model.ImageSettings)
                                {
                                <tr>
                                    <td>
                                        <span>@Html.Encode(image.folder)</span>
                                        @Html.TextBox("folder", image.folder, new { id = "", style = "width:40px;display:none" })

                                    </td>

                                    <td>
                                        <span>@Html.Encode(image.width)</span>
                                        @Html.TextBox("width", image.width, new { id = "", style = "width:40px;display:none" })
                                    </td>
                                    <td>
                                        <span>@Html.Encode(image.height)</span>
                                        @Html.TextBox("height", image.height, new { id = "", style = "width:40px;display:none" })
                                    </td>
                                    <td class="action" data-section="@Model.alias" data-id="@image.folder">
                                        <a class="btn btn-success" href="#"><i class="icon-refresh"></i>Refresh</a>
                                        <a class="btn btn-danger" href="#"><i class="icon-trash icon-white"></i>Delete</a>
                                    </td>
                                </tr>
                                }

                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </fieldset>

    </div>
    }

    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <input type="submit" value="提交" class="btn btn-primary" />
        <!--<a href="#" class="btn btn-primary">Save changes</a>-->
    </div>
    
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".modal-body .icon-plus-sign").click(function () {
                var tr = $("tbody tr.hide").clone().removeClass("hide");
                $(".modal-body tbody").append(tr);

            });
            $(".action .btn-danger").live("click", function (e) {
                var parent = $(this).parent().parent();
                var id = $(this).parent().attr("data-id");
                var section = $(this).parent().attr("data-section");
                var s = "uid=" + id + "&" + "sectionId=" + section + "&";
                $.ajax({
                    url: "/weblogin/platimage/DeleteImageSetting",
                    global: false,
                    type: "POST",
                    data: s,
                    dataType: "text",
                    success: function (data) {
                        if (data == "True") {
                            parent.fadeOut();
                            
                        }

                    }
                });

            });
            $(".action .btn-success").live('click', function (e) {

                var $this = $(this);
                var id = $(this).parent().attr("data-id");
                var section = $(this).parent().attr("data-section");
                var s = "uid=" + id + "&" + "sectionId=" + section + "&";
                s += getInput($(this));
                var html = $.ajax({
                    url: "/weblogin/platimage/EditImageSetting",
                    global: false,
                    type: "POST",
                    data: s,
                    dataType: "text",
                    success: function (data) {
                        if (data == "True") {
                            refresh($this);
                        }

                    }
                });
                e.preventDefault();


            });
            function refresh(item) {
                var parent = item.parent().parent();
                parent.find("input").hide();
                parent.find("span").show();

            }


            function getInput(item) {
                var result = "";
                var inputs = item.parent().parent().find("input");
                $.each(inputs, function (key, input) {

                    result += input.name + "=" + input.value + "&";
                });
                return result;
            }
            $("tbody td").live("dblclick", function () {
                var $this = $(this);
                $this.children().hide();
                $this.find("input").show().focus();
            });
            $("tbody input").live("change", function () {

                $(this).prev().html($(this).val());

            });
        });

    </script>

}